<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #boy{
            background-color: #f7f1e3;
        }
    </style>
</head>
<body>
<div id="boy" align="center">
    <div th:include="common/inc"></div>
    <input type="button" style="background-color: #f99e01; width: 150px;height: 40px;text-align: center;line-height: 20px;border: none;border-radius: 5px;" class="btn preBtn" value="男生榜">
    <input type="button" style="background-color: whitesmoke; width: 150px;height: 40px;text-align: center;border: 1px #f99e01 solid;line-height: 20px;border-radius: 5px;" th:onclick="toGirl()" value="女生榜"><br><br>
    <table>
        <tr>
            <td id="end" width="300px"></td>
            <td id="collect" width="300px"></td>
            <td id="new" width="300px"></td>
            <td id="update" width="300px"></td>
        </tr>
    </table>
</div>
</body>
<script>
    $(function () {
        getEnd();
        getCollect();
        getNew();
        getUpdate();
    })
    function toGirl() {
        $.ajax({
            url:"toRankingGirl",
            dataType:"html",
            type:"get",
            success:function (data) {
                $("#boy").html(data);
            }
        })
    }
    function getEnd() {
        $.ajax({
            url:"toBoyEndBank",
            dataType:"html",
            type:"get",
            success:function (data) {
                $("#end").html(data);
            }
        })
    }
    function getCollect() {
        $.ajax({
            url:"toBoyCollectBank",
            dataType:"html",
            type:"get",
            success:function (data) {
                $("#collect").html(data);
            }
        })
    }
    function getNew() {
        $.ajax({
            url:"toBoyNewBank",
            dataType:"html",
            type:"get",
            success:function (data) {
                $("#new").html(data);
            }
        })
    }
    function getUpdate() {
        $.ajax({
            url:"toBoyUpdateBank",
            dataType:"html",
            type:"get",
            success:function (data) {
                $("#update").html(data);
            }
        })
    }
</script>
</html>